<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue'
import Child from './components/Child.vue'

const arr = ref<string[]>([])
arr.value = ['tab1', 'tab2', 'tab3']
arr[2] = 'tabtab'
const changeArr = () => {
    console.log('arr=', arr)
    console.log('arr=', arr.value)
}

const arr2: string[] = reactive(['aa', 'bb', 'cc'])
const changeArr2 = () => {
    console.log('arr2=', arr2)
    arr2.push('55')
}
const clear = () => {
    // arr2 = ['11']
    // arr.value.length = 0
    name.value = 'haha'
}
interface Member {
  id: number
  name: string
}
const userInfo: Member = reactive({
    id: 1,
    name: 'Petter',
})
const {name, id} = toRefs(userInfo)

</script>
<template>
    <div>
        <div>parents</div>
        <div v-for="item in arr" :key="item">{{ item }}</div>
        <button @click="changeArr">changeArr</button>
        <div v-for="item in arr2" :key="item">{{ item }}</div>
        <button @click="changeArr2">changeArr2</button>
        <button @click="clear">clear</button>
        <Child>
            <!-- 默认插槽 -->
            <p>Default slot for TSX.</p>
            <!-- 默认插槽 -->

            <!-- 命名插槽 -->
            <template #msg="{ data }">
            <p>Named slot for TSX.</p>
            <p>{{ data.title }}--{{ data.age }}</p>
            </template>
            <!-- 命名插槽 -->
        </Child>
    </div>
</template>
